<template>
  <div>
    <span>动态获取组件：</span>
    <!-- <button @click="()=>CountUp" >子组件 + 1</button>
      <div v-for="(item, i) in state.count" :key="item">
      <child :ref="(el) => childRefs[i] =el" />
      </div>
    <button @click="()=>CountDown" >子组件 - 1</button> -->
    <button @click="childNums++">子组件 + 1</button>
    <div v-for="(item, i) in childNums" :key="item">
      <child :ref="(el) => (childRefs[i] = el)" />
    </div>
    <button
      @click="
        () => {
          childNums > 1 ? childNums-- : childNums
        }
      "
    >
      子组件 - 1
    </button>
  </div>
</template>

<script lang="ts" setup>
import child from './children-component.vue'
import { computed, reactive, ref } from 'vue'
//   const childRef = ref<InstanceType<typeof child>>()

// 子组件实例数组
const childRefs = ref<any>([])

// 子组件数量
const childNums = ref(1)

//   const state = reactive({
//     count: 1
//   })

//   const CountUp = computed(()=>{
//     return state.count++
// })
//   const CountDown = computed(()=>{
//     return state.count--
// })
</script>
